import FirstView from "../views/vue-router/named-view/FirstView";
import SecondView from "../views/vue-router/named-view/SecondView";
import ThirdView from "../views/vue-router/named-view/ThirdView";

let number = 0;

const updateNumber = () => {
  ++number;
  console.log(number);
};

const VueRouter = [
  {
    path: "/RouterGetStarted",
    component: () => import("../views/vue-router/get-started/GetStarted.vue"),
  },
  {
    path: "/DynamicMatching/:userName",
    component: () =>
      import("../views/vue-router/dynamic-matching/DynamicMatching.vue"),
  },
  {
    path: "/MatchingSyntax/:orderId(\\d+)",
    component: () =>
      import("../views/vue-router/matching-syntax/MatchingSyntaxNumber"),
  },
  {
    path: "/MatchingSyntax/:productName",
    component: () =>
      import("../views/vue-router/matching-syntax/MatchingSyntaxString"),
  },
  {
    path: "/NestingRouter/:userId",
    component: () => import("../views/vue-router/nesting-router/NestingRouter"),
    children: [
      {
        path: "",
        name: "user",
        component: () => import("../views/vue-router/nesting-router/ChildFile"),
      },
    ],
  },
  {
    path: "/ProgrammedNavigation/",
    component: () =>
      import("../views/vue-router/programmed-navigation/ProgrammedNavigation"),
  },
  {
    path: "/RouterPage/",
    name: "RouterPage",
    component: () =>
      import("../views/vue-router/programmed-navigation/RouterPage"),
  },
  {
    path: "/NamedRoute/",
    name: "NamedRoute",
    component: () => import("../views/vue-router/named-route/NamedRoute"),
  },
  {
    path: "/NamedView",
    name: "NamedView",
    component: () => import("../views/vue-router/named-view/NamedView"),
    children: [
      {
        path: "showView",
        name: "showView",
        components: {
          default: FirstView,
          SecondView: SecondView,
          ThirdView: ThirdView,
        },
      },
    ],
  },
  {
    path: "/RedirectHome/:id",
    name: "RedirectHome",
    component: () => import("../views/vue-router/redirect-router/RedirectHome"),
    alias: ["/RedirectHomeAlias/:id", "/RedirectHomeAlias2/:id"],
  },
  {
    path: "/Redirect",
    // redirect: '/RedirectHome'
    redirect: (to) => {
      // 方法接收目标路由作为参数
      // return 重定向的字符串路径/路径对象
      return { path: "/RedirectHome", query: { q: to.params.searchText } };
    },
  },
  {
    path: "/passingProps/:id",
    name: "passingProps",
    component: () =>
      import("../views/vue-router/passing-props/PassingProps.vue"),
    props: true,
  },
  {
    path: "/FunctionalProps/:id",
    name: "FunctionalProps",
    component: () =>
      import("../views/vue-router/passing-props/FunctionalProps.vue"),
    // 模拟参数传递
    // props: (route) => ({ query: route.query.q, id: 1 }),
    props: (route) => {
      // 可以从缓存中获取数据
      return {
        query: route.query.q,
        id: 1,
      };
    },
  },
  {
    path: "/NavigationGuards",
    name: "NavigationGuards",
    // beforeEnter: (to, from) => {
    //   console.log(to.fullPath);
    //   console.log(from.fullPath);
    // },
    /**
     * 支持以数组的形式定义多个方法
     */
    beforeEnter: [updateNumber],
    component: () =>
      import("../views/vue-router/navigation-guards/NavigationGuards.vue"),
  },
  {
    path: "/RouterMeta/",
    name: "RouterMeta",
    component: () => import("../views/vue-router/router-meta/RouterMeta.vue"),
    meta: { requiresAuth: false },
    props: true,
  },
  {
    path: "/DataFetching/",
    name: "DataFetching",
    component: () =>
      import("../views/vue-router/data-fetching/DataFetching.vue"),
  },
  {
    path: "/CompositionApi/",
    name: "CompositionApi",
    component: () =>
      import("../views/vue-router/composition-api/CompositionApi.vue"),
  },
  {
    path: "/transitions/",
    name: "transitions",
    component: () =>
      import("../views/vue-router/transitionsDemo/TransitionsDemo.vue"),
    children: [
      {
        path: "slide",
        component: () =>
          import(
            /* webpackChunkName: "group-transitions" */ "../views/vue-router/transitionsDemo/SlidePage.vue"
          ),
        meta: { transition: "slide" },
      },
      {
        path: "fade",
        component: () =>
          import(
            /* webpackChunkName: "group-transitions" */ "../views/vue-router/transitionsDemo/FadePage.vue"
          ),
        meta: { transition: "fade" },
      },
    ],
  },
  {
    path: "/ScrollBehavior/",
    name: "ScrollBehavior",
    component: () =>
      import("../views/vue-router/scroll-behavior/ScrollBehavior.vue"),
  },
  {
    path: "/ExtendingRouterLink/",
    name: "ExtendingRouterLink",
    component: () =>
      import(
        "../views/vue-router/extending-router-link/ExtendingRouterLink.vue"
      ),
  },
  {
    path: "/NavigationFailures/",
    name: "NavigationFailures",
    component: () =>
      import("../views/vue-router/navigation-failures/NavigationFailures.vue"),
  },
  {
    path: "/DynamicRouting/",
    name: "DynamicRouting",
    component: () =>
      import("../views/vue-router/dynamic-routing/DynamicRouting.vue"),
  },
];
export { VueRouter };
